<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/index.css">
    <title>不凡首页</title>
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="logo">
            <a href="">
            </a>
        </div>
        <nav>
            <a>首页 <span class="line"></span></a>
            <a class="w-u">前端开发
                <span class="web icon"></span>
            </a>
            <a class="w-u act">UI设计
                <span class="ui icon"></span>
            </a>
            <a>不凡说 <span class="line"></span></a>
            <a>导航 <span class="line"></span></a>
        </nav>
    </header>

    <!-- banner -->
    <div class="banner">
        <div class="banner-c"></div>
    </div>

    <!-- 导航 -->

    <div class="nav-c">
        <nav>
            <a>课程<span class="line"></span></a>
            <a>作品<span class="line"></span></a>
            <a>项目<span class="line"></span></a>
            <a>师资<span class="line"></span></a>
            <a>环境<span class="line"></span></a>
        </nav>
    </div>


    <!-- 优势 -->
    <div class="super">
        <div class="super-c">
            <div class="bufan ft">
                <div class="bf-1">小单元精品班，老师就在身边，问题随时解决</div>
                <div class="bf-2">5年打磨课程体系，插画/C4D/品牌/前端代码，更全更新</div>
                <div class="bf-3">设计/开发分组配合完成项目，学习真正的工作流程</div>
                <div class="bf-4">全MAC电脑教学，享受专业UI设计师相同配备</div>
            </div>
            <div class="vs ft">
                <span>VS</span>
                <p>不凡学院&nbsp;&nbsp;传统机构</p>
            </div>
            <div class="other ft">
                <div>百人大班，老师活在视频里，问题不能随时解决</div>
                <div>传统通用课程，图标/网页/APP，大家都会没有亮点</div>
                <div>虚拟项目，不懂实际工作中的团队配合</div>
                <div>WIN电脑，无法学习sketch等专业设计软件</div>
            </div>
        </div>
    </div>

    <!-- 标题1  -->
    <div class="title">
        <div class="stage">
            <span>共2周</span>
            <p>第一阶段：Ui基础入门</p>
        </div>
        <p>Ps、Ai等基础软件操作与实战；排版、配色、美术原理等基础设计理论学习</p>
        <div class="time">
            <span>学时共:</span>
            <span class="num">14</span>
            <span>周</span>
        </div>
    </div>

    <!-- 1.基础 -->
    <div class="base same">
        <div class="left hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="/img/PS.png" class="io icon-ps"></img>
            <img src="/img/ai_logo.png" class="io icon-ui"></img>
        </div>
        <div class="right hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="/img/PS.png" class="io icon-ps"></img>
            <img src="/img/ai_logo.png" class="io icon-ui"></img>
        </div>
    </div>

    <!-- 标题2 -->
    <div class="title two">
        <div class="stage">
            <span>共5周</span>
            <p>第二阶段：表现技法拔高</p>
        </div>
        <p>学习手绘，通过手绘板进行插画设计；掌握C4D软件进行3D效果的设计展示</p>
    </div>
    <!-- 2.提升 -->
    <div class="promote same">
        <div class="left hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/Pixelmator.png" class="io icon-pix"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/timg.png" class="io icon-timg"></img>
        </div>
        <div class="right hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/Pixelmator.png" class="io icon-pix"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/timg.png" class="io icon-timg"></img>
        </div>
    </div>

    <!-- 标题3 -->
    <div class="title three">
        <div class="stage">
            <span>共5周</span>
            <p>第三阶段：产品设计与交互设计</p>
        </div>
        <p>学习产品思维；原型设计；Web网页、移动端APP等实战项目练习；Ae交互动效设计</p>
    </div>

    <!-- 3.思维 -->
    <div class="thought same">
        <div class="left hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/SK.png" class="io icon-SK"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/AX.png" class="io icon-AX"></img>
        </div>
        <div class="right hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/XMind.png" class="io icon-SK"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/lan.png" class="io icon-AX"></img>
        </div>
    </div>

    <!-- 标题4 -->
    <div class="title four">
        <div class="stage">
            <span>共2周</span>
            <p>第四阶段：项目流程与作品集包装，面试指导</p>
        </div>
        <p>学习前端开发知识，掌握工作中设计师如何与前端工程师配合；讲解作品集与模拟面试</p>
    </div>

    <!-- 4.项目 -->
    <div class="project same">
        <div class="left hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/h5-1.png" class="io icon-h5-1"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/h5.png" class="io icon-h5"></img>
        </div>
        <div class="right hov">
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <a href="">
                <span> 1、Ui初识与行业发展</span>
                <span>（ui行业现状分析/如何做好职业规划）</span>
            </a>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/h5-1.png" class="io icon-h5-1"></img>
            <img src="http://www.bufanui.com/pages/front/pages/ui/img/h5.png" class="io icon-h5"></img>
        </div>
    </div>


    <!-- 免费公开课 -->
    <div class="free">
        <span>免费公开课</span>
        <span>SUPER</span>
    </div>

    <div class="course">
        <div class="public">
            <a class="Ai" href="">
                <img src="/img/ai_logo.png" alt="">
            </a>
            <p>Ai - 基础教程</p>
            <p class="teacher">主讲老师：费老师</p>
        </div>
        <div class="public">
            <a class="Ae" href="">
                <img src="/img/ae_logo.png" alt="">
            </a>
            <p>Ai - 基础教程</p>
            <p class="teacher">主讲老师：费老师</p>
        </div>
        <div class="public">
            <a class="Sketch" href="">
                <img src="/img/sketch_logo.png" alt="">
            </a>
            <p>Ai - 基础教程</p>
            <p class="teacher">主讲老师：费老师</p>
        </div>
        <div class="public">
            <a class="Ps" href="">
                <img src="/img/PS.png" alt="">
            </a>
            <p>Ai - 基础教程</p>
            <p class="teacher">主讲老师：费老师</p>
        </div>
    </div>

    <!-- 底部 -->
    <div class="foot">
        <div class="foot-c">
            <!-- 地址电话 -->
            <div class="add-tel">
                <div class="address">
                    <p class="first">地址:</p>
                    <p>郑州市 / 郑东新区金水东路绿地新都会 / 6号楼1104</p>
                </div>
                <div class="tel">
                    <p class="first">电话:</p>
                    <p>18838180363</p>
                    <p class="tel-time">(周一至周日 9:00 - 6:30 )</p>
                </div>
            </div>
            <!-- wx,qq -->
            <div>
                <div class="wx">
                    <p class="regular">微信号:</p>
                    <p>bufanxueyuan</p>
                </div>
                <div class="qq">
                    <p class="regular">QQ:</p>
                    <p>3581997982</p>
                </div>
            </div>
            <!-- 二维 -->
            <div class="qr">
                <p>
                    <span>前端</span>
                    扫码咨询/报名
                </p>
                <img src="/img/qr.png" alt="">
            </div>
            <div class="qr">
                <p>
                    <span>UI</span>
                    扫码咨询/报名
                </p>

                <img src="http://bufanui.com/pages/front/img/qr_ui.jpg" alt="">
            </div>

        </div>
    </div>

    <!-- 底部链接 -->
    <div class="link">
        <div class="link-c">
            友情链接:
            <a href="">站酷</a>
            <a href="">花瓣</a>
            <a href="">蓝湖</a>
            <a href="">爱果果</a>
            <a href="">github</a>
            <span>Copyright© 2017-2020 不凡学院 豫ICP备 </span>
            <a href="">17015347号-1</a>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="bar">
        <a href="">点我咨询</a></div>

</body>

</html>